<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>淘房 - 注册</title>
    <link rel="shortcut icon" href="favicon.ico"> <link href="../../taofang/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../taofang/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../taofang/css/custom.css" rel="stylesheet">
    <link href="../../taofang/css/animate.css" rel="stylesheet">
    <link href="../../taofang/css/style.css?v=4.1.0" rel="stylesheet">
    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>

</head>

<body class="gray-bg">

    <div class="middle-box text-center loginscreen   animated fadeInDown">
        <div style="margin-top: 60%">

            <h3>欢迎注册 淘房</h3>
            <p>创建一个淘房新账户</p>
            <form id="register" class="m-t" role="form" method="post" action="/taofang/register/adduser.action" onsubmit="return checkpwd2(),checkPwd(),checkname(),checked()">
                <div class="form-group">
                    <input type="text" class="form-control" name="account" id="account" placeholder="请输入用户名" required="" onblur="checkname()">
                    <span id="account_id">请输入用户名</span>
                </div>
                <div class="form-group">
                    <input type="password" class="form-control"  name="password" id="password" placeholder="请输入密码" required="" onblur="checkPwd()">
                    <span id="password_id1">请输入密码</span>
                </div>
                <div class="form-group">
                    <input type="password" class="form-control"  name="password2" id="password2" placeholder="请再次输入密码" required="" onblur="checkpwd2()">
                    <span id="password_id2">请再次输入密码</span>
                </div>
                <div>
                    <label for="register">选择身份</label>
                    <select class="form-control"  name="identity" id="identity">
                        <option>租客</option>
                        <option>经纪人</option>
                        <option>房东</option>
                    </select>
                </div>
                <br>
                <div class="form-group text-left">
                    <div class="checkbox i-checks">
                        <label class="no-padding"><input type="checkbox" name="ck_content" value="1" id="check"/> 我同意注册协议</label>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary block full-width m-b" onclick="checked()" >注 册</button>

                <p class="text-muted text-center"><small>已经有账户了？</small><a href="/taofang/login/check.action">点此登录</a></p>

            </form>
        </div>
    </div>

    <!-- 全局js -->

    <script src="../../taofang/plugins/jquery-3.4.1.js"></script>
    <script src="../../taofang/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!-- register注册功能 -->

    <script>

        function checkname() {
            let name = $("#account").val();
            let datas = {"account":name}
            let flag = true;
            $.post('/taofang/register/checkaccount.action', datas, function (data) {
                if(data.code==200){
                    document.getElementById("account_id").innerText="用户名可用"
                }else {
                    document.getElementById("account_id").innerText="用户名已存在"
                    flag = false;
                }
            })
            return flag;
        }

        function checkPwd() {
            let pwd = $("#password").val();

            if (pwd!=""){
                if(!(/^[a-zA-Z0-9]{6,8}$/.test(pwd))){
                    document.getElementById("password_id1").innerText="密码不合法,必须为6-8位，可包含数字，大小写字母"
                    return false;
                } else {
                    document.getElementById("password_id1").innerText="密码可用"
                    return true;
                }
            }else {
                document.getElementById("password_id1").innerText="密码不能为空"
            }
        }

        function checkpwd2() {
            let pwd2 = $("#password2").val();
            let pwd = $("#password").val();

            if (pwd2!=pwd){
                document.getElementById("password_id2").innerText="两次密码不一致"
                return false;
            }else {
                document.getElementById("password_id2").innerText="密码一致"
                return true;
            }
        }

        function checked() {
            let cks = document.getElementsByName("ck_content");
            let count = 0;
            let flag = false;
            for (let i = 0; i < cks.length; i++) {
                if (cks[i].checked){
                    count++;
                }
            }
            if (count==0){
                alert("请确认协议")
            }else {
                flag = true;
            }
            return flag;
        }



    </script>


</body>

</html>
